<template>
  <div 
    class="skeleton-loader"
    :class="{
      'skeleton-loader--animated': animated,
      'skeleton-loader--rounded': rounded
    }"
  >
    <!-- 消息列表骨架屏 -->
    <template v-if="type === 'message-list'">
      <div 
        v-for="i in count" 
        :key="i" 
        class="skeleton-message"
        :class="{ 'skeleton-message--own': i % 3 === 0 }"
      >
        <div class="skeleton-message__avatar" v-if="i % 3 !== 0" />
        <div class="skeleton-message__content">
          <div class="skeleton-message__header" v-if="i % 3 !== 0">
            <div class="skeleton-line skeleton-line--short" />
            <div class="skeleton-line skeleton-line--xs" />
          </div>
          <div class="skeleton-message__body">
            <div class="skeleton-line" :style="{ width: getRandomWidth() }" />
            <div 
              v-if="Math.random() > 0.5" 
              class="skeleton-line" 
              :style="{ width: getRandomWidth() }" 
            />
          </div>
        </div>
        <div class="skeleton-message__avatar" v-if="i % 3 === 0" />
      </div>
    </template>

    <!-- 好友列表骨架屏 -->
    <template v-else-if="type === 'friend-list'">
      <div v-for="i in count" :key="i" class="skeleton-friend">
        <div class="skeleton-friend__avatar" />
        <div class="skeleton-friend__content">
          <div class="skeleton-line skeleton-line--medium" />
          <div class="skeleton-line skeleton-line--short" />
        </div>
        <div class="skeleton-friend__status" />
      </div>
    </template>

    <!-- 会话列表骨架屏 -->
    <template v-else-if="type === 'conversation-list'">
      <div v-for="i in count" :key="i" class="skeleton-conversation">
        <div class="skeleton-conversation__avatar" />
        <div class="skeleton-conversation__content">
          <div class="skeleton-conversation__header">
            <div class="skeleton-line skeleton-line--medium" />
            <div class="skeleton-line skeleton-line--xs" />
          </div>
          <div class="skeleton-line skeleton-line--long" />
        </div>
        <div class="skeleton-conversation__badge" v-if="Math.random() > 0.7" />
      </div>
    </template>

    <!-- 聊天输入框骨架屏 -->
    <template v-else-if="type === 'chat-input'">
      <div class="skeleton-chat-input">
        <div class="skeleton-chat-input__toolbar">
          <div v-for="i in 3" :key="i" class="skeleton-chat-input__tool" />
        </div>
        <div class="skeleton-chat-input__input" />
        <div class="skeleton-chat-input__send" />
      </div>
    </template>

    <!-- 用户信息骨架屏 -->
    <template v-else-if="type === 'user-info'">
      <div class="skeleton-user-info">
        <div class="skeleton-user-info__avatar" />
        <div class="skeleton-user-info__content">
          <div class="skeleton-line skeleton-line--medium" />
          <div class="skeleton-line skeleton-line--short" />
          <div class="skeleton-line skeleton-line--long" />
        </div>
      </div>
    </template>

    <!-- 通用骨架屏 -->
    <template v-else>
      <div v-for="i in count" :key="i" class="skeleton-item">
        <div 
          class="skeleton-line" 
          :style="{ 
            width: width || getRandomWidth(),
            height: height || '16px'
          }" 
        />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// Props
interface Props {
  type?: 'message-list' | 'friend-list' | 'conversation-list' | 'chat-input' | 'user-info' | 'generic'
  count?: number
  animated?: boolean
  rounded?: boolean
  width?: string
  height?: string
}

const props = withDefaults(defineProps<Props>(), {
  type: 'generic',
  count: 3,
  animated: true,
  rounded: false
})

// Methods
const getRandomWidth = (): string => {
  const widths = ['60%', '70%', '80%', '90%', '100%']
  return widths[Math.floor(Math.random() * widths.length)]
}
</script>

<style lang="scss" scoped>
.skeleton-loader {
  &--animated {
    .skeleton-line,
    .skeleton-message__avatar,
    .skeleton-friend__avatar,
    .skeleton-conversation__avatar,
    .skeleton-user-info__avatar,
    .skeleton-chat-input__tool,
    .skeleton-chat-input__input,
    .skeleton-chat-input__send,
    .skeleton-friend__status,
    .skeleton-conversation__badge {
      position: relative;
      overflow: hidden;
      
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.6),
          transparent
        );
        animation: skeleton-loading 1.5s infinite;
      }
    }
  }
  
  &--rounded {
    .skeleton-line {
      border-radius: 8px;
    }
  }
}

// 基础骨架线
.skeleton-line {
  background: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 8px;
  
  &--xs {
    width: 40px;
    height: 12px;
  }
  
  &--short {
    width: 60px;
    height: 14px;
  }
  
  &--medium {
    width: 120px;
    height: 16px;
  }
  
  &--long {
    width: 200px;
    height: 14px;
  }
}

// 消息列表骨架屏
.skeleton-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 16px;
  
  &--own {
    flex-direction: row-reverse;
    
    .skeleton-message__content {
      align-items: flex-end;
    }
    
    .skeleton-message__header {
      flex-direction: row-reverse;
    }
  }
  
  &__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  
  &__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
  }
  
  &__body {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 8px 12px;
    max-width: 70%;
    
    .skeleton-line {
      margin-bottom: 4px;
      background: #e0e0e0;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

// 好友列表骨架屏
.skeleton-friend {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  
  &__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  
  &__content {
    flex: 1;
    min-width: 0;
  }
  
  &__status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
  }
}

// 会话列表骨架屏
.skeleton-conversation {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid #f0f0f0;
  
  &__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  
  &__content {
    flex: 1;
    min-width: 0;
  }
  
  &__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
  }
  
  &__badge {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
  }
}

// 聊天输入框骨架屏
.skeleton-chat-input {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid #f0f0f0;
  
  &__toolbar {
    display: flex;
    gap: 8px;
  }
  
  &__tool {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0f0f0;
  }
  
  &__input {
    flex: 1;
    height: 36px;
    border-radius: 18px;
    background: #f0f0f0;
  }
  
  &__send {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f0f0f0;
  }
}

// 用户信息骨架屏
.skeleton-user-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  
  &__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f0f0f0;
    flex-shrink: 0;
  }
  
  &__content {
    flex: 1;
    min-width: 0;
  }
}

// 通用骨架屏
.skeleton-item {
  margin-bottom: 12px;
  
  &:last-child {
    margin-bottom: 0;
  }
}

// 动画
@keyframes skeleton-loading {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

// 移动端优化
@media (max-width: 768px) {
  .skeleton-message {
    padding: 0 12px;
    margin-bottom: 12px;
    
    &__avatar {
      width: 36px;
      height: 36px;
    }
  }
  
  .skeleton-friend,
  .skeleton-conversation {
    padding: 10px 12px;
    
    &__avatar {
      width: 44px;
      height: 44px;
    }
  }
  
  .skeleton-chat-input {
    padding: 10px 12px;
    
    &__tool {
      width: 28px;
      height: 28px;
    }
    
    &__input {
      height: 32px;
    }
    
    &__send {
      width: 32px;
      height: 32px;
    }
  }
  
  .skeleton-user-info {
    padding: 16px 12px;
    
    &__avatar {
      width: 60px;
      height: 60px;
    }
  }
}
</style>